﻿@using AiXiu.Model
@model TBVideos
@{
    ViewBag.Title = "Play";

    TBUsers author = Model.TBUsers;
    string avatar = "/imgs/avatar.jpg";
    if (!string.IsNullOrEmpty(author.Avatar))
    {
        avatar = author.Avatar;
    }

    //视频播放凭证
    GetPlayInfoResult playInfo = ViewBag.playInfo as GetPlayInfoResult;

    bool isLike = ViewBag.isLike;
    long likeCount = ViewBag.likeCount;
    long discussCount = ViewBag.discussCount;
}
<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
<style>
    .fab-title {
        width: 50%;
        left: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));
        bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));
    }

    .title {
        width: 100%;
        margin-bottom: 10rem;
        background: rgba(0,0,0,0.5);
        padding: 0.2rem 0.8rem;
        border-radius: 0.3rem;
    }

    .avatar {
        width: 42px;
        height: 42px;
        border-radius: 42px;
    }

    .nickname {
        width: 4em;
        text-overflow: ellipsis;
    }
</style>
<div class="page" data-page="play">
    <div class="page-content">
        <div class="prism-player" id="player"></div>
    </div>
    <div class="fab fab-title">
        <div class="title text-color-white">
            <p>@Model.Headline</p>
            @if (!string.IsNullOrWhiteSpace(Model.Location))
            {
                <p><i class="f7-icons size-14">placemark</i>@Model.Location</p>
            }
        </div>
    </div>
    <div class="fab fab-right-bottom">
        <a href="@Url.Action("UserVideos","Video")?userId=@author.Id" class="videos box-shadow-none bg-color-none external">
            <img class="avatar" src="@avatar" />
        </a>
        <p class="nickname text-color-white text-align-center no-margin-top">@author.NickName</p>
        <a href="#" class="like box-shadow-none bg-color-none">
            @if (isLike)
            {
                <i class="like-icon icon f7-icons text-color-pink size-42">heart_fill</i>
            }
            else
            {
        <i class="like-icon icon f7-icons text-color-white size-42">heart_fill</i>
            }

        </a>
        <p class="like-count text-color-white text-align-center no-margin-top">@likeCount</p>
        <a href="@Url.Action("Discuss","Video")?videoId=@Model.VideoId" class="discuss box-shadow-none bg-color-none external">
            <i class="discuss-icon icon f7-icons text-color-white size-42">chat_bubble_text</i>
        </a>
        <p class="discuss-count text-color-white text-align-center no-margin-top">@discussCount</p>
    </div>
</div>
@section footScript{
    <script src="//g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
    <script>
        // 播放视频
        player = new Aliplayer({
            'id': 'player',
            'source': '@playInfo.PlayURL',      // 播放地址
            'width': '100%',
            'height': '100%',
            'autoplay': true,
            //'autoplay': false,
            'isLive': false,
            'cover': '@playInfo.CoverURL',      // 封面地址
            'rePlay': false,
            'playsinline': true,
            'preload': true,
            'controlBarVisibility': 'hover',
            'useH5Prism': true
        });
        // 点赞
        var $$likeIcon = $$('.page .like-icon');
        var $$likeCount = $$('.page .like-count');
        $$('.page').on('click', '.like', function () {
            // 未点赞
            if ($$likeIcon.hasClass('text-color-white')) {
                $$likeIcon.removeClass('text-color-white').addClass('text-color-pink');
                $$likeCount.html(parseInt($$('.page .like-count').html()) + 1);
            }
            // 已点赞
            else {
                $$likeIcon.removeClass('text-color-pink').addClass('text-color-white');
                $$likeCount.html(parseInt($$('.page .like-count').html()) - 1);
            }
            app.request.get('@Url.Action("VideoLike", "Video")', { videoId: "@Model.VideoId", userId: "@author.Id" });
        })
    </script>
}
